<template>
    <div>
        <div class="filter-container">
            <!--查询的表单数据-->
            <el-form :inline="true" :model="categorySearch" size="mini">
                <el-form-item label="类别名称:">
                    <el-input v-model.trim="categorySearch.categoryname"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button icon='el-icon-search' type="primary" @click="initCategory">查询</el-button>
                    <el-button icon='el-icon-refresh' class="filter-item" @click="handleReset">重置</el-button>
                    <el-button icon='el-icon-circle-plus-outline'  type="primary" @click="addCategoryDialog">添加</el-button>
                </el-form-item>
            </el-form>
        </div>

        <!--新增弹出层-->
        <el-dialog
                title="添加类别信息"
                :visible.sync="addlogVisible"
                width="30%">
            <el-form :model="addCategoryForm" :rules="rules" ref="ruleForm" >
                <el-form-item label="类别名称" label-width="80px" prop="categoryname">
                    <el-input v-model="addCategoryForm.categoryname" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="addlogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addCategory">确 定</el-button>
        </span>
        </el-dialog>

        <!--修改弹出层-->
        <el-dialog
                title="修改类别信息"
                :visible.sync="editLogVisible"
                width="30%">
            <el-form :model="editCategoryForm" >
                <el-form-item label="类别名称" label-width="80px">
                    <el-input v-model="editCategoryForm.categoryname" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="editLogVisible=false ">取 消</el-button>
            <el-button type="primary" @click="editCategoryInfo">确 定</el-button>
        </span>
        </el-dialog>


        <!--数据表格-->
        <el-table  size="medium"
                   :data="categoryList" stripe border>
            <el-table-column prop="id"
                             label="编号"
                             width="300"
                             align="center">
            </el-table-column>
            <el-table-column
                    prop="categoryname"
                    label="类别"align="center">
            </el-table-column>
            <el-table-column label="操作" width="300"align="center">
                <template slot-scope="scope">
                    <el-button  type="success" @click="editCategory(scope.row)" size="mini">修改</el-button>
                    <el-button  type="danger" @click="delCategory(scope.row)" size="mini">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分页-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "categoryManage",
        data(){
            return{
                categoryList:{},
                editCategoryForm:{},
                editLogVisible:false,
                categorySearch:{},
                addlogVisible:false,
                addCategoryForm:{},
                /*分页*/
                pageSizes:[6,12,18,24],
                currentPage:1,
                pageSize:6,
                total:0,
                rules: {
                    categoryname: [
                        { required: true, message: '请输入类别名称', trigger: 'blur' },
                    ],
                },

            }
        },
        created() {
            this.initCategory();
        },
        methods:{
            //查询
            initCategory(){
                /*this.categorySearch.pageCurrent = this.currentPage;
                this.categorySearch.pageSize = this.pageSize;*/
                this.$http.post("/goods/category/selecategory?currentPage="+this.currentPage+"&pageSize="+this.pageSize,this.categorySearch).then(res=>{
                    console.log(res);
                    if (res.data.code===2000){
                        this.categoryList = res.data.data.list;
                        this.total  = res.data.data.total;
                    }else {
                        this.$message.error("查询失败");
                    }
                })

            },
            editCategory(row){
                this.editLogVisible=true;
                this.editCategoryForm = row;
            },
            //修改
            editCategoryInfo(){
                this.$http.put("/goods/category/updatecategory",this.editCategoryForm).then(res=>{
                    if(res.data.code===2000){
                        this.$message.success(res.data.msg)
                        this.editLogVisible = false;
                    }else if(res.data.code===4000){
                        this.$message.error(res.data.msg)
                    }else{
                        this.$message.error(res.data.msg)
                    }
                })
            },
            /*添加*/
            addCategory() {
                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                        this.$http.post("/goods/category/insertcategory", this.addCategoryForm).then(res => {
                            if (res.data.code === 2000) {
                                this.$message.success(res.data.msg);
                                this.addlogVisible = false;
                                this.initCategory();
                            } /*else if (res.data.code === 4000) {
                                this.$message.error(res.data.msg);
                            } */else {
                                this.$message.error("添加成功");
                            }
                        })
                    }
                })
            },
            addCategoryDialog(){
                this.addlogVisible = true;
            },
            /*分页*/
            handleSizeChange(val) {
                this.pageSize = val;
                this.initCategory();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.initCategory();
            },
            handleReset(){
                this.categorySearch={};
                this.initCategory();
            },
            //删除
            delCategory(row){
                this.$confirm('是否删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.delete("/goods/category/deletecategory?id="+row.id).then(res=>{
                        if(res.data.code===2000){
                            this.initCategory();
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },

        },
    }
</script>

<style scoped>

</style>